<!--
 * @Author: lemon 719771893@qq.com
 * @Date: 2025-03-01 14:12:23
 * @LastEditors: 李梦
 * @LastEditTime: 2025-03-08 06:05:40
 * @FilePath: /ranyu_anchor_new/src/views/register/index.vue
 * @Description: 注册页面
-->
<template>
  <div class="register-container">
    <div class="logout_wrap">
      <img :src="logo" class="logo" />
      <div class="right">
        <img class="avatar" :src="headerImg" />

        <div class="telphone m-l-7 m-r-7">
          {{ imUserId }}
        </div>

        <el-dropdown>
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <RegisterHeader :activetab="step" />
    <keep-alive :include="['BaseInfoForm', 'AuthInfo']">
      <template v-if="step == 1">
        <BaseInfoForm :key="'auth-info-' + step" :info="baseInfo" @next-step="handleNextStep" />
      </template>
      <template v-else-if="step == 2">
        <AuthInfo
          :key="'auth-info-' + step"
          :info="authInfo"
          @back="step--"
          @submit="hangdleSubmit"
        />
      </template>

      <template v-else-if="step == 3">
        <RegisterSteps
          :is-payed="isPayed"
          :status="authStep"
          :reject-desc="rejectDesc"
          :apply-time="applyTime"
          @toFirstStep="handleUpdate"
        />
      </template>
      <template v-else>
        <!-- step为：4-未缴纳，5-已缴纳 -->
        <RegisterSteps
          :is-payed="isPayed"
          :status="authStep"
          :reject-desc="rejectDesc"
          :apply-time="applyTime"
          @toFirstStep="handleUpdate"
        />
        <PayMethod :step="step" />
      </template>
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from "vue";
import RegisterHeader from "./components/RegisterHeader.vue";
import RegisterSteps from "./components/RegisterSteps.vue";
import BaseInfoForm from "./components/BaseInfoForm.vue";
import AuthInfo from "./components/AuthInfo.vue";
import PayMethod from "./components/PayMethod.vue";
import AuthAPI, { type SubmitInfo, RegisterAuthInfo, RegisterBaseInfo } from "@/api/auth/index";
import headerImg from "@/assets/register/default_avator.png";
import logo from "@/assets/ranyu_logo.png";
import router from "@/router";

const imUserId = ref<any>();
onMounted(() => {
  imUserId.value = localStorage.getItem("phone");
});
const isLoading = ref(false); // 提交材料并申请 按钮的loading状态
provide("isLoading", isLoading);

const isShowBtn = ref(false); // 修改按钮的显示隐藏判断在请求结束后再做
provide("isShowBtn", isShowBtn);
const authStep = ref(0); // 审核状态 0待审核 1通过 2拒绝
const step = ref(1); // 注册步骤
const logOut = () => {
  localStorage.clear();
  location.reload();
};

const baseInfo = ref<RegisterBaseInfo>({
  name: "",
  age: "",
  idCardType: "", // 证件类型：1身份证
  papers: "", // 证件号
  area: [],
  province: "", // 省
  city: "", // 市
  district: "", // 区
  category: "", // 主播类别：1交友相亲 2情感互动 3悦耳声优 4搞笑娱乐 5游戏陪玩 6哄睡剧场
  bankNo: "", // 银行卡号
  bank: "", // 开户行
  bankScanUrl: "", // 银行卡扫描件
  bankFrontUrl: "", // 银行卡正面
  bankReverseUrl: "", // 银行卡反面
});
const authInfo = ref<RegisterAuthInfo>({
  idCardFrontUrl: "", // 身份证正面照片
  idCardReverseUrl: "", // 身份证反面照片
  gameDanUrl: "", // 游戏段位照片
  videoUrl: "", // 手持身份证录制视频
  pactScanUrl: "", // 合同扫描件
  recUrl: "", // 音频文件
  masUrl: "", // 视频文件
});

const isPayed = ref(true); // 是否缴纳保证金
const applyTime = ref(""); // 申请时间
const rejectDesc = ref(""); // 驳回原因

// 提交注册信息/修改
const applyBeAnchor = async (data: SubmitInfo) => {
  try {
    await AuthAPI.submitApply(data);
    step.value++;
    getInfo(); // 刷新审核状态
  } catch (error) {
    ElMessage({
      showClose: true,
      message: `${error}`,
      type: "error",
    });
    console.log(error);
  }
  isLoading.value = false;
};

// 获取注册信息
const getInfo = async (reject: number = 2) => {
  try {
    isShowBtn.value = false;
    const params = {
      userBizId: localStorage.getItem("userBizId"),
    };
    const res = await AuthAPI.getUserInfo(params);
    if (!res) return;
    if (Number(res.regStatus) === 5) {
      localStorage.setItem("userType", "3");
      router.push("/dashboard");
    }
    authStep.value = res.status; // 审核状态  0待审核 1通过 2拒绝
    isShowBtn.value = true;
    step.value = reject == 1 ? 1 : Number(res.regStatus); // 注册步骤
    applyTime.value = res.createTime; // 申请时间
    rejectDesc.value = `${["", "信息不完整", "信息模糊", "信息造假", "信息篡改", "数据错误", "其他"][res.reject]}:${res.rejectRemark}`; // 原因类型： 1信息不完整 2信息模糊 3信息造假 4信息篡改 5数据错误 6其他 驳回原因：类型+详情
    isPayed.value = Number(res.regStatus) === 5; // 是否缴纳保证金
    baseInfo.value.name = res.name;
    baseInfo.value.age = res.age;
    baseInfo.value.idCardType = `${res.idCardType}`;
    baseInfo.value.papers = res.papers;
    baseInfo.value.province = res.province;
    baseInfo.value.city = res.city;
    baseInfo.value.district = res.district;
    baseInfo.value.category = res.category;
    baseInfo.value.bankNo = res.bankNo;
    baseInfo.value.bank = res.bank;
    baseInfo.value.bankScanUrl = res.bankScanUrl;
    baseInfo.value.bankFrontUrl = res.bankFrontUrl;
    baseInfo.value.bankReverseUrl = res.bankReverseUrl;

    authInfo.value.idCardFrontUrl = res.idCardFrontUrl;
    authInfo.value.idCardReverseUrl = res.idCardReverseUrl;
    authInfo.value.gameDanUrl = res.gameDanUrl;
    authInfo.value.videoUrl = res.videoUrl;
    authInfo.value.pactScanUrl = res.pactScanUrl;
    authInfo.value.recUrl = res.recUrl;
    authInfo.value.masUrl = res.masUrl;
  } catch (error) {
    console.log(error);
  }
};

const handleUpdate = () => {
  getInfo(1);
};

onMounted(() => {
  if (localStorage.getItem("userBizId")) {
    getInfo();
  }
});
provide("getInfo", { getInfo });
// 下一步点击事件
const handleNextStep = (obj: RegisterBaseInfo) => {
  baseInfo.value = { ...obj };
  step.value++;
};
// 提交材料点击事件
const hangdleSubmit = (obj: RegisterAuthInfo) => {
  isLoading.value = true;
  authInfo.value = { ...obj };
  const params = {
    ...baseInfo.value,
    ...authInfo.value,
    regStatus: step.value + 1,
    userBizId: localStorage.getItem("userBizId"),
  };
  applyBeAnchor(params);
};

const contractUrl = ref("");
const fileName = ref("");
const getContract = async (type: number) => {
  if (type == 0) return;
  try {
    const res = await AuthAPI.getContract(type);
    contractUrl.value = res.url;
    console.log(res);
  } catch (error) {
    console.log(error);
  }
};
provide("contractUrl", { contractUrl, getContract, fileName });
</script>

<style lang="scss" scoped>
.logout_wrap {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #f9faff 0%, #fbfcff 100%);
  width: 100%;
  padding-top: 10px;
  .logo {
    width: 210px;
    margin-left: 6%;
  }
  .right {
    margin-right: 6%;
    display: flex;
    align-items: center;

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
  }
}
.logout_btn {
  background: #fff;
  min-width: 30px;
  padding: 4px 6px;
  border-radius: 2px;
  float: right;
  transform: translate(-20px, 10px);
  cursor: default;
  color: #f56c6c;
}
.register-container {
  background: linear-gradient(180deg, #f9faff 0%, #fbfcff 100%);
  min-height: 100vh;
  padding-top: 50px;
  padding-bottom: 100px;
}
</style>
